@use "src/styles/variables" as *;

.vm-text-field {
  position: relative;
  display: grid;
  margin: 6px 0;
  width: 100%;

  &_disabled {
    color: $color-text-disabled;
    pointer-events: none;
  }

  &:is(&_disabled) > &__label {
    color: $color-text-disabled;
  }

  &_textarea:after {
    content: attr(data-replicated-value) " ";
    white-space: pre-wrap;
    overflow-wrap: break-word;
    visibility: hidden;
  }

  &__input,
  &::after {
    font-family: $font-family-monospace;
    width: 100%;
    padding: $padding-small $padding-global;
    border: $border-divider;
    background-color: transparent;
    font-size: $font-size;
    line-height: 18px;
    grid-area: 2 / 1 / 2 / 2;
    overflow: hidden;
    box-sizing: border-box;
  }

  &__label,
  &__error,
  &__warning,
  &__helper-text, {
    width: fit-content;
    margin-top: calc(($font-size-small/-2) - 1px);
    margin-bottom: calc(($font-size-small/-2) - 1px);
    margin-left: calc($padding-global/2);
    max-width: calc(100% - $padding-global);
    padding: 0 3px;
    font-size: $font-size-small;
    line-height: calc($font-size-small + 2px);
    pointer-events: none;
    user-select: none;
    background-color: $color-background-block;
    z-index: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* number of lines to show */
    line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  &__label {
    color: $color-text-secondary;
  }

  &__helper-text,
  &__warning,
  &__error {
    overflow-wrap: anywhere;
    pointer-events: auto;
    user-select: text;

    &_full {
      display: block;
      overflow: visible;
    }

    &_overflowed {
      cursor: pointer;
    }
  }

  &__error {
    color: $color-error;
  }

  &__warning {
    color: $color-warning;
  }

  &__helper-text {
    color: $color-text-secondary;
  }

  &__input {
    display: block;
    border-radius: $border-radius-small;
    transition: border 200ms ease;
    resize: none;
    overflow: hidden;
    background-color: transparent;
    color: $color-text;

    &:focus {
      border: 1px solid $color-primary;
    }

    &:hover {
      border: 1px solid $color-primary;
    }

    &_error {
      border-color: $color-error;

      &:hover {
        border-color: $color-error;
      }

      &:focus {
        border-color: $color-error;
      }
    }

    &_warning {
      border-color: $color-warning;

      &:hover {
        border-color: $color-warning;
      }

      &:focus {
        border-color: $color-warning;
      }
    }

    &_icon-start {
      padding-left: 31px;
    }

    &:disabled {
      background-color: inherit;
      color: inherit;

      &:hover {
        border-color: $color-text-disabled;
      }
    }
  }

  &__icon-start,
  &__icon-end {
    align-self: center;
    max-width: 15px;
    position: absolute;
    color: $color-text-secondary;
  }

  &__icon-start {
    left: $padding-global;
  }

  &__icon-end {
    right: $padding-global;
  }
}
